<template>
  <!-- 添加或修改对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
    <a-spin :spinning="loading">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="11" hidden>
            <el-form-item>
              <el-input v-model="form.metadataId" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="字段名字">
              <el-input v-model="form.metadataName" style="width: 100%" placeholder="输入框字段名字" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="字段类型">
              <el-select v-model="form.htmlType" style="width: 100%">
                <el-option
                  v-for="(item, index) in formType"
                  :key="item + index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否必填">
              <el-select v-model="form.isRequired" style="width: 100%">
                <el-option key="1" label="是" value="1"></el-option>
                <el-option key="2" label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="提示文字">
              <el-input v-model="form.metadataPrompt" style="width: 100%" placeholder="输入框提示内容" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否可见">
              <el-select v-model="form.isList" style="width: 100%">
                <el-option key="1" label="是" value="1"></el-option>
                <el-option key="2" label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="form.htmlType === 'select'">
          <el-divider content-position="left">下拉框选项</el-divider>
          <el-row v-for="(item, index) in selectForm" :key="index">
            <el-col :span="11">
              <el-form-item :label="'选项 ' + (index + 1)" :prop="'selectForm.' + index + '.value'">
                <el-input v-model="selectForm[index].value" placeholder="请输入选项内容" @input="$forceUpdate()" />
              </el-form-item>
            </el-col>
            <el-col style="line-height: 34px" :span="6" :offset="2">
              <el-button v-if="selectForm.length > 1" type="danger" @click="handleSelectDelete(index)" size="mini">
                删除
              </el-button>
              <el-button type="success" @click="handleSelectAdd" size="mini">新增</el-button>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </a-spin>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { formType } from './config';
import { addMetadata, editMetadata } from '@/pages/views/account/service';
import pick from 'lodash/pick';
export default {
  name: 'AddForm',
  data() {
    return {
      form: {},
      open: false,
      loading: false,
      title: '添加',
      selectForm: [{ value: '' }],
      formType,
    };
  },
  watch: {
    open: {
      handler(val, oldVal) {
        if (!val && oldVal) this.form = {};
      },
      immediate: true,
    },
  },
  methods: {
    handleSelectAdd() {
      this.selectForm.push({ value: '' });
    },
    handleSelectDelete(index) {
      this.selectForm.splice(index, 1);
    },
    edit(row) {
      this.form = pick(row, ['metadataId', 'metadataName', 'htmlType', 'isRequired', 'metadataPrompt', 'isList']);
      if (row.htmlType === 'select' && row.selectComment) {
        this.selectForm = row.selectComment.split(',').map((item) => ({ value: item }));
      }
      this.$nextTick(() => {
        this.open = true;
      });
    },
    async doItData(f) {
      const res = await f(this.form);
      this.loading = false;
      if (res.code !== 200) return this.$message.error(res.message || '操作失败');

      this.$emit('refresh');
      this.$message.success('操作成功~');
      this.open = false;
    },
    submitForm() {
      this.loading = true;
      if (this.form.htmlType === 'select') {
        this.form.selectComment = this.selectForm.map((item) => item.value).join(',');
      }
      this.form.metadataId ? this.doItData(editMetadata) : this.doItData(addMetadata);
    },
    cancel() {
      this.form = {};
      this.open = false;
    },
  },
};
</script>

<style scoped></style>
